<script setup lang="ts">
import { usePagination } from "@/common/composables/usePagination";
import Upload from "@/pages/scn/components/upload.vue"
import { ScnTableInfo, TableRequestData } from "@@/apis/scn/type"
import { searchScenarioListApi } from "@@/apis/scn"
import { getProjectId } from "@/common/utils/cache/local-storage"
import { Search } from "@element-plus/icons-vue"

interface Props {
  visible: boolean
  selected: string | undefined
}
const props = defineProps<Props>()
const emit = defineEmits(["closeDialog", "selectItem"])
const dialogVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const dialogVisibleUp = ref<boolean>(false)
const searchKey = ref<string>()
const tableData = ref<ScnTableInfo[]>([])
const selectedScnId = ref<string>()
const tempSelectedItem = ref<ScnTableInfo>()

const { paginationData, handleSizeChange, handleCurrentChange } = usePagination()

function showDialog() {
  dialogVisible.value = true
  selectedScnId.value = props.selected
  tempSelectedItem.value = undefined
  handleSearch()
}
function handleCloseTip(done: () => void) {
  // 校验值是否相同
  if (selectedScnId.value !== undefined || tempSelectedItem.value != undefined) {
    closeDialog()
    done()
    return
  }
  ElMessageBox.confirm("未选择想定，是否确定关闭？").then(() => {
    done()
  })
}

function closeDialog() {
  if (tempSelectedItem.value) {
    emit("selectItem", tempSelectedItem.value)
  }
  emit("closeDialog")
}
function closeDialogUp() {
  dialogVisibleUp.value = false
  searchKey.value = undefined
  handleSearch()
}
function handleUpload() {
  dialogVisibleUp.value = true
}
function getTableData() {
  loading.value = true
  const params: TableRequestData = {
    pageSize: paginationData.pageSize,
    current: paginationData.currentPage,
    searchKey: searchKey.value,
    pId: getProjectId()
  }
  searchScenarioListApi(params)
    .then(({ data }) => {
      tableData.value = data.rows
      paginationData.total = data.total
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
function handleSearch() {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
function handleRadioChange(row: ScnTableInfo) {
  selectedScnId.value = row.id
  tempSelectedItem.value = row
}
watch(
  () => props.visible,
  () => {
    if (props.visible) {
      showDialog()
    }
  }
)
</script>

<template>
  <el-drawer
    v-model="dialogVisible"
    direction="rtl"
    size="900px"
    :before-close="handleCloseTip"
    @close-auto-focus="closeDialog"
    @close="closeDialog"
    :show-close="false"
    :append-to-body="true"
  >
    <template #header>
      <div class="drawer-header">
        <h4>选择想定</h4>
      </div>
    </template>
    <template #default>
      <div class="toolbar-wrapper">
        <el-button @click="handleUpload">
          本地上传
        </el-button>
        <el-input v-model="searchKey" placeholder="请输入" style="width: 300px" @keyup.enter="handleSearch">
          <template #append>
            <el-button :icon="Search" v-throttle="() => handleSearch()" />
          </template>
        </el-input>
      </div>

      <el-table ref="multipleTableRef" row-key="trained_agent_id" :data="tableData">
        <el-table-column align="center" label="选择" width="60">
          <template #default="scope">
            <el-radio v-model="selectedScnId" :label="scope.row.id" @change="() => handleRadioChange(scope.row)">
              <span class="hidden-text">选择</span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column property="scnName" label="名称" width="140" />
        <el-table-column property="description" label="描述" show-overflow-tooltip />
      </el-table>

      <Upload ref="editDialogRef" :visible="dialogVisibleUp" @close-dialog="closeDialogUp" />
    </template>
    <template #footer>
      <div class="dialog-footer-pager">
        <el-pagination
          background
          layout="total, sizes, ->, prev, pager, next, jumper"
          :disabled="loading"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :current-page="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
  </el-drawer>
</template>
<style lang="scss" scoped>
.hidden-text {
  display: none;
}
</style>